{% extends "layout.html" %}
{% block content %}
    <div class="x-nav">
      <div class="layui-col-md6">
          <button class="layui-btn" onclick="x_admin_show('添加通道','channel-edit.html',800,400)"><i class="layui-icon"></i>添加通道</button>
      </div>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body layui-anim layui-anim-up">
      <table id="channelList" class="layui-table" lay-filter="channel">
      </table>
      <script type="text/html" id="channelBar">
        <div class="layui-btn-group">
          <button type="button" class="layui-btn layui-btn-sm" lay-event="state"><i class="layui-icon">状态</i></button>
          <!-- <button type="button" class="layui-btn layui-btn-sm" lay-event="dataTable"><i class="layui-icon">点表</i></button> -->
          <button type="button" class="layui-btn layui-btn-sm" lay-event="filter"><i class="layui-icon">过滤器</i></button>
          <button type="button" class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon">&#xe642;</i></button>
          <button type="button" class="layui-btn layui-btn-sm"lay-event="del"><i class="layui-icon">&#xe640;</i></button>
        </div>
      </script>    
</div>
    <script>
      var start,end,channelTitle;
      var channel_id=GetQueryString('channel_id');
      $(function  () {
            layui.use(['table','form'], function(){
                var table = layui.table;
                var layer=layui.layer;
                table.render({
                    elem: '#channelList'
                    ,height:'full-100'
                    ,url:'./channelList'
                    ,cols:[[
                    {title:'ID',field:'channel_id',align: 'center', sort: true,width:100}
                        ,{title:'名称',field:'name',align: 'center', width:100}
                        ,{title:'主机IP/com',field:'host_ip',align: 'center',width:260,templet:function(d){
                            if(!["2"].includes(d.protocol)){
                                return d.host_ip;
                            }else{
                                return d.com;
                            }
                        }}
                        ,{title:'端口号/波特率',field:'port',align: 'center', width:150,templet:function(d){
                            if(!["2"].includes(d.protocol))
                                return d.port;
                            else if(d.channel_id==0)
                                return "-";
                            else
                                return d.band_rate;
                        }}
                        ,{title:'可用/停用',field:'enable',align: 'center', width:120,templet:function(d){
                            if(d.enable==1)
                                return "<span class='layui-bg-green'>可用</span>";
                            else
                                return "<span class='layui-bg-red'>停用</span>";
                        }}
                        ,{fixed: 'right', align:'center', toolbar: '#channelBar'}
                    ]]
                    ,page: true
                });
                //监听表格复选框选择
                table.on('checkbox(channel)', function(obj){
                });
                //监听工具条
                table.on('tool(channel)', function(obj){
                    var data = obj.data;
                    switch(obj.event){
                        case 'edit':
                            // if(obj.data.channel_id==1){
                            //     layer.alert("默认通道不可编辑！");
                            //     return;
                            // }
                            x_admin_show('编辑通道','channel-edit.html?channel_id='+obj.data.channel_id,800,450);
                            break;
                        case 'state':
                            if(obj.data.channel_id==1){
                            layer.alert("默认通道一直在运行中！");
                            return;
                            }
                            x_admin_show('通道状态','channel-state.html?channel_id='+obj.data.channel_id,800,400);
                            break;
                        case 'dataTable':
                            href="../dataItem/dataItem-list.html?channel_id="+obj.data.channel_id;
                            openTab(href,obj.data.name+"通道点表",301);
                            break;
                        case 'filter':
                            href="../channel/channel-data-filter-list.html?channel_id="+obj.data.channel_id;
                            openTab(href,obj.data.name+"通道点表",301);
                            break;
                        case 'del':
                            if(obj.data.channel_id==1){
                                layer.alert("默认通道不可删除！");
                                return;
                            }
                            layer.confirm('真的删除行么', function(index){
                                // console.log(obj.data);
                                data={'channel_id':obj.data.channel_id};
                                $.ajax({
                                    url:'delChannel',
                                    type:'POST',
                                    data:data,
                                    success:function(data){
                                        // console.log(data);
                                        if(data.code==0)obj.del();
                                    }
                                });
                                obj.del();
                                layer.close(index);
                            });
                            break;
                        default:
                    }
                });
            });
        })
    </script>
{% endblock %}